<template>
    <div class="trend_box">
        <div class="trend_item" v-for="(item, index) in trends" :key="index" @click="pladd(item)">
            <!-- <image :src="item.userurl" class="item_left"></image> -->
            <div class="item_right">
                <!-- 用户名 -->
                <div class="item_right_name">{{ item.title }}</div>
                <!-- 文案内容 -->
                <div class="item_right_content">{{ item.comment }}</div>
                <!-- 图片集合 -->
               <div class="item_right_img_box" v-if="item.fileList.length > 0">
                    <image class="item_right_img" v-for="(img_item, imgindex) in item.fileList" :key="imgindex"
                        :src="img_item" @click.stop="previewImage(imgindex, img_item)">
                    </image>
                </div>
				<view v-if="item.userId === ids" class="deletes" @click.stop="deletes(1, item.id)">删除</view>
				<view class="plll" v-if="item.children.length > 0">评论列表</view>
				<view v-if="item.children.length > 0" class="pl-list">
					<view class="items" v-for="i in item.children" :key="i.id">
						<view>评论内容: {{i.comment}}</view>
						<view v-if="i.userId === ids" class="delete" @click.stop="deletes(2, i.id)">删除</view>
					</view>
				</view>
                <!-- 工具栏 -->
               <!-- div class="toolInfo">
                    <div class="toolInfo_time">2小时前</div>
                    <div class="toolInfo_box">评论</div>
                </div> -->
                <!-- 点赞人数 -->
               <!-- <div class="startList">
                    ❤ {{item.total}}
                </div> -->
            </div>
        </div>
        <h4 class="noMore_text" v-if="noMore">没有更多了...</h4>
    </div>
</template>

<script>
export default {
    data() {
        return {
            popupVisible: true,
            trends: [],
            total: 0,
            noMore: false,
			ids: 0,
        }
    },
    activated() {
        // 初始化请求list数据
        this.getMore(true)
    },
	onLoad() {
	},
    mounted() {
        // 初始化请求list数据
        this.getMore(true)
    },
    methods: {
        //预览图片
        previewImage(imgIndex, urls) {
            let that = this;
            uni.previewImage({
                current: imgIndex,
                urls: urls,
                success: function (res) {

                }
            });
        },
		pladd (item) {
			// uni.setStorageSync('pyqDetail', JSON.stringify(item))
			// uni.navigateTo({
			// 	url: '/pages/friendsCircle/pladd'
			// })
			uni.navigateTo({
				url: '/pages/friendsCircle/detailpls?id=' + item.id
			})
		},
		deletes(type, id) {
			uni.request({
				url: this.$serverUrl + 'deletePhotoCricle',
				method: 'POST',
				header: {
					'token': uni.getStorageSync('token'),
					'content-type': 'application/json' //自定义请求头信息
				},
				data: {
					id,
					type
				},
				success: (res) => {
					if (res.data.code === 200) {
						uni.showToast({
							title: '删除成功',
							duration: 1500,
						});
						setTimeout(() => {
							this.trends = []
							this.getMore()
						}, 1500)
					} else {
						uni.showToast({
						    title: '删除失败',
						    duration: 1500,
						    icon: none
						});
					}
				}
			});
		},
        // 获取更多数据 flag:是否是第一次加载
        getMore(flag = false) {
			uni.request({
				url: this.$serverUrl + 'pagePhotoCircle',
				method: 'POST',
				header: {
					'token': uni.getStorageSync('token'),
					'content-type': 'application/json' //自定义请求头信息
				},
				data: {
					//只需传入图片信息与分类id
					'pageSize': 999,
					'pageCurrent': 1,
					'comment': '',
					'userName': ''
				},
				success: (res) => {
					console.log('res', res.data.data.list)
					res.data.data.list.forEach(item => {
						item.fileList = []
						if (item.file.indexOf('[') >= 0) {
							JSON.parse(item.file).forEach(i => {
								item.fileList.push(i)
								console.log('1111', i)
							})
						}
						console.log('itemitem', item)
						this.trends.push(item)
					})
					console.log('11111111', uni.getStorageSync('userInfo'))
					this.ids = uni.getStorageSync('userInfo').id
					// this.trends = res.data.data.list
				}
			});
            // if (!flag && this.trends.length >= this.total) {
            //     console.log('没有更多了')
            //     return
            // }
            // uni.showLoading({
            //     title: '加载中',
            // })
            // setTimeout(() => {
            //     const list = Array(10).fill({
            //         name: '测试数据',
            //         export: false,
            //         userurl: 'https://t7.baidu.com/it/u=1732966997,2981886582&fm=193&f=GIF',
            //         imglist: ['https://images.weserv.nl/?url=https://wallhaven.icu/homepics/rrodj7.png', 'https://images.weserv.nl/?url=https://wallhaven.icu/homepics/rrodj7.png', 'https://images.weserv.nl/?url=https://wallhaven.icu/homepics/rrodj7.png', 'https://images.weserv.nl/?url=https://wallhaven.icu/homepics/rrodj7.png', 'https://images.weserv.nl/?url=https://wallhaven.icu/homepics/rrodj7.png', 'https://images.weserv.nl/?url=https://wallhaven.icu/homepics/rrodj7.png', 'https://images.weserv.nl/?url=https://wallhaven.icu/homepics/rrodj7.png',],
            //         level2: '小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标'
            //     })
            //     this.trends = this.trends.concat(list)
            //     this.total = 25
            //     if (this.trends.length >= this.total) {
            //         this.noMore = true
            //     }
            //     uni.hideLoading();
            // }, 200);
            // console.log('加载更多')
        }
    },
}
</script>

<style lang="scss" scoped>
.plll {
	color: #fff;
	background: #0e66cb;
	height: 60rpx;
	width: 160rpx;
	border-radius: 16rpx;
	text-align: center;
	line-height: 60rpx;
	margin-top: 60rpx;
	font-size: 32rpx;
}
.pl-list {
	.items {
		color: #0e66cb;
		padding-top: 16rpx;
	}
	.delete {
		color: #fff;
		background: red;
		width: 120rpx;
		font-size: 28rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 16rpx;
		margin-top: 16rpx;
	}
}
.deletes {
	float: right;
		color: #fff;
		background: red;
		width: 120rpx;
		font-size: 28rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 16rpx;
		margin-top: 16rpx;
	}
.startList {
    background: #e6e1e1;
	width: 100%;
    color: #0e66cb;
    margin-top: 10px;
}

.toolInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .toolInfo_time {
        color: #adaaaa;
    }

    .toolInfo_box {
        color: rgb(30, 137, 219);
        border-radius: 5px;
        font-weight: 550;
    }
}

.allText {
    overflow: auto;
}

.trend_box {
    padding: 10px;

    .trend_item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 20px;

        .item_left {
            width: 12vw;
            height: 12vw;
            border-radius: 10px;
        }

        .item_right {
            width: 100%;
			position: relative;

            .item_right_name {
                color: rgb(30, 137, 219);
                font-weight: 550;
            }

            .item_right_content {
                color: #000;
                margin-top: 5px;
                overflow: hidden;

            }

            .item_right_img_box {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .item_right_img {
                width: 30%;
                margin-top: 10px;
                height: 100px;
            }

            .export {
                color: rgb(30, 137, 219);
                font-size: 14px;
            }
        }
    }
}

.noMore_text {
    text-align: center;
}
</style>